<template>
	<view class="goal-list">
		<!-- 信息是打卡就显示该元素 -->
		<view class="clocked-in-tip-wrapper">
			<u-image class="clocked-in-image" width="125rpx" height="117rpx" mode="aspectFit" :src="clockedInImg"></u-image>
			<view class="clocked-in-name-info">
				<view class="clocken-goal-name">{{ goalName }}</view>
				<view class="goal-tiem">
					<!-- <view>坚持跑步</view> -->
					<view>{{ startTime | getDate }} 至 {{ endTime | getDate }}</view>
				</view>
			</view>
			<view class="clocked-in-success">
				<view class="clocked-in-success-text">
					{{ handleGoalStatu() }}
				</view>
				<image class="decoration decoration1" src="https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/27cda2c0-e1bc-11e9-a30a-41900ee53442.png"></image>
				<image class="decoration decoration2" src="https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/56ca23a0-e1bc-11e9-a3ed-05b4249b2ee6.png"></image>
				<image v-show="handleGoalStatu() === '已完成'" class="clocked-in-success-image" src="https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/6ab3ef80-e1b8-11e9-83c4-692d6d1aaad6.png"></image>
			</view>
		</view>
		<view class="clocked-in-list">
			<view class="clocked-in-item" v-for="(goal,index) in goalList" :key="index" @click="handleJump(goal)">
				<view class="clocked-in-time">
					{{ goal.createTime | getDate }}
				</view>
				<view class="clocked-in-image">
					<u-image width="180" height="180" mode="aspectFill" :src="coverImg(goal)"></u-image>
				</view>
				<view class="clocked-in-content">
					{{ goal.signWord }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index.js'
	import {
		getWebUserDonateSignRecord
	} from '@/api/goal.js'

	export default {

		data() {
			return {
				goalList: [],
				openId: '',
				userDonateId: '',
				goalName: '',
				createTime: '',
				startTime: '',
				endTime: '',
				userSignDonateCount: '',
				timesValue: '',
				timeValue: '',
				pagination: {
					startIndex: 0,
					length: 15,
					totalCount: 0,
				}
			}
		},

		onLoad(options) {
			this.openId = options.openId
			this.userDonateId = options.userDonateId
			this.handleGetWebUserDonateSignRecord()
		},

		// 上拉加载
		onReachBottom() {
			if (this.pagination.totalCount >= this.goalList.length) return
			this.pagination.startIndex += 1
			this.handleGetWebUserDonateSignRecord()
		},

		methods: {

			// 获取列表数据
			async handleGetWebUserDonateSignRecord() {
				const data = JSON.stringify({
					openId: this.openId,
					userDonateId: this.userDonateId,
					startIndex: this.pagination.startIndex,
					length: this.pagination.length
				})
				try {
					const {
						resultData
					} = await getWebUserDonateSignRecord({
						data
					})
					const userDonate = resultData.userDonate
					this.pagination.totalCount = resultData.totalCount
					this.goalName = userDonate.goalName
					this.userSignDonateCount = userDonate.userSignDonateCount
					this.timesValue = userDonate.timesValue
					this.timeValue = userDonate.timeValue
					this.startTime = userDonate.startTime
					this.endTime = userDonate.endTime

					this.goalList = [...this.goalList, ...resultData.list]
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},

			coverImg(goal) {
				return goal.signPic ? JSON.parse(goal.signPic)[0] : ''
			},

			handleJump(goal) {
				uni.navigateTo({
					url: `/pages/insidePages/releaseDetails/index?userSignRecordId=${goal.userSignRecordId}`
				})
			},

			// 补全目标
			handleText(goal) {
				return goal.goalName.includes('跑步') ? '公里' : goal.goalName.includes('练字') ? '字帖数量' : goal.goalName.includes('单词') ?
					'单词数量' : '次数'
			},

			// 目标状态
			handleGoalStatu() {
				const startTime = this.startTime
				const endTime = this.endTime
				const currentTime = new Date().getTime()
				const userSignDonateCount = this.userSignDonateCount // 已成功打卡
				const timesValue = this.timesValue // 坚持目标打卡达到多少次
				const timeValue = this.timeValue // 每次坚持目标达多少数量

				if (currentTime < endTime) {
					return '进行中'
				} else if (currentTime >= endTime && userSignDonateCount >= timesValue) {
					return '已完成'
				} else if (currentTime >= endTime && userSignDonateCount < timesValue) {
					return '未达标'
				}
			}
		},

		computed: {

			clockedInImg() {
				return this.goalName ? `https://mini.chi1jing.com/file/common/${this.goalName}的副本.png` : ''
			}
		},

		filters: {
			getDate(value) {
				const date = new Date(value)
				const month = date.getMonth() + 1 > 12 ? '01' : date.getMonth() + 1 > 9 ? date.getMonth() + 1 :
					`0${date.getMonth() + 1}`
				const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`
				return month + '-' + day
			}
		}
	}
</script>

<style lang="scss">
	.clocked-in-tip-wrapper {
		overflow: hidden;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
		height: 156rpx;
		padding: 24rpx;
		background-image: url("https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/371e6e40-e1a7-11e9-83c4-692d6d1aaad6.png");
		background-size: contain;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.clocked-in-image {
			// margin-top: 14rpx;
		}

		.clocked-in-name-info {
			color: #fff;
			font-size: 40rpx;

			.clocken-goal-name {
				margin-bottom: 12rpx;
			}

			.goal-tiem {
				font-size: 26rpx;
			}
		}

		.clocked-in-success {
			position: relative;
			display: flex;
			align-items: flex-end;
			text-align: center;
			font-size: 30rpx;
			color: #fff;

			.clocked-in-success-text {
				margin-right: 40rpx;
				font-style: italic;
			}

			.clocked-in-success-image {
				width: 64rpx;
				height: 64rpx;
				margin: auto;
			}

			.decoration {
				position: absolute;
			}

			.decoration1 {
				width: 10rpx;
				height: 10rpx;
				top: 3rpx;
				right: 52rpx;
			}

			.decoration2 {
				top: 31rpx;
				right: 70rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}

	.clocked-in-list {
		margin-top: 28rpx;

		padding: 0 40rpx;

		.clocked-in-item {
			display: flex;
			margin-bottom: 32rpx;

			.clocked-in-time {
				margin-right: 24rpx;
				line-height: 168rpx;
				align-items: center;
				font-size: 34rpx;
			}

			.clocked-in-content {
				width: calc(100vw - 410rpx);
				margin-left: 24rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 5;
				text-overflow: ellipsis;
				white-space: initial !important;
				font-size: 28rpx;
			}
		}
	}
</style>
